<template>
    <div :style="{ display: 'flex',height: '100%' }">


        <a-card
                class="card"
                title="智能聊天AI"
                hoverable
        >

            <!--:data="dataSource"-->
            <a-list
                    class="list-demo-action-layout"
                    :bordered="false"

                    :pagination-props="paginationProps"
                    size="small"
                    :split="false"
                    style="height: 365px"
                    :virtualListProps="{ height: 360, }"

            >
                <template #item="{ item }">
                    <a-list-item class="list-demo-item" action-layout="vertical">

                        <a-list-item-meta
                                :description="item.description"
                        >
                            <template #avatar>
                                <a-avatar class="icon-hover">
                                    <img alt="avatar" :src="item.avatar" />
                                </a-avatar>
                            </template>

                        </a-list-item-meta>

                    </a-list-item>
                </template>
            </a-list>

            <a-comment
                    style="margin-bottom: 0px;display: flex"
                    align="right"
                    :avatar="currentUser.avatar"
            >
                <template #actions>
                    <a-button type="primary" style="" @click="submit"> 发送</a-button>
                </template>
                <template #content>
                    <a-textarea placeholder="在这里输入你想说的话,不能超过500个字"
                                :max-length="500"
                                allow-clear
                                show-word-limit
                                v-model="question"
                                :auto-size="{ minRows:3, maxRows:6}"
                    />
                </template>

            </a-comment>

        </a-card>

    </div>
</template>
<script  setup>
    import axios from "axios";
    import {reactive} from 'vue'
    import message from "@arco-design/web-vue/es/message";
    import {ref} from "@vue/reactivity";
    import myAxios from '../plugins/myAxios';
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";
    import {getCurrentUser} from "@/services/user";

    const currentUser = ref({})
    const oldList=ref([])
    const newsList=ref([])
    onMounted(async () => {
        currentUser.value = await getCurrentUser();

    })

    const names = ['Socrates', 'Balzac', 'Plato'];
    const avatarSrc = [
        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp',
    ];
    const imageSrc = [
        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',
        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp',
        '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp',
    ];
    const dataSource = new Array(15).fill(null).map((_, index) => {
        return {
            index: index,
            avatar: avatarSrc[index % avatarSrc.length],
            title: names[index % names.length],
            description:
                'Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).',
            imageSrc: imageSrc[index % imageSrc.length],
        };
    });

    const question = ref('');
    const answer = ref('')

    const instance = axios.create();

    const submit = async () => {

        if (question.value === '') {
            message.error("请输入问题")
            return;
        }
        message.success("正在思考...")

        const res = await instance.get(`https://v1.apigpt.cn/?q=${message.value}&apitype=sql`);

        if (res.data.code == 200) {
            // newsList.value = res.data.message;
            message.success("提问成功！")
            answer.value = res.data.ChatGPT_Answer
        } else {
            console.log("res.code:" + res.code)
            message.error(res.data.description ? `${res.data.description}` : '请求失败!')
        }
    }


</script>

<style scoped>

    .card-demo {
        width: 700px;
        margin-left: 300px;
        margin-top: 50px;
        transition-property: all;
    }
    .card-demo:hover {
        transform: translateY(-4px);
    }

    .card{
        width: 1000px;
        height: 100%;
        margin-left: 250px;
        margin-top: 0px;

    }

    .icon-hover {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        transition: all 0.1s;
    }

</style>
